<template>
  <div id="search">
    <router-link to="/">
      <van-nav-bar left-text left-arrow />
    </router-link>
    <div class="inp">
      <van-icon name="search" background="#f8f8f8" size="14px" />
      <input v-model="value" @keyup.enter="dopost" type="text" placeholder="请输入商家、商品名称" />
      <span>搜索</span>
    </div>
    <p>
      历史搜索
      <span @click="clear">
        <van-icon name="delete" />
      </span>
    </p>
    <ul class="history">
      <li v-for="item in arr1" :key="item">{{ item }}</li>
    </ul>
    <p>热门搜索</p>
    <ul class="remen">
      <li>鸡蛋灌饼</li>
      <li>煎饼果子</li>
      <li>煎饼</li>
      <li>混沌</li>
      <li>生煎</li>
      <li>星巴克</li>
      <li>豆腐脑</li>
      <li>胡辣汤</li>
      <li>永和大王</li>
      <li>肠粉</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      arr1: []
    };
  },
  methods: {
    dopost() {
      if (this.value) {
        this.arr1.push(this.value)
        this.value = "";
      }
    },
    clear() {
        this.arr1.splice(0,this.arr1.length)
    }
  },
  created() {
    this.$bus.$emit("footernav", false);
    this.$store.dispatch("setshow", false);
  },
  beforeDestroy() {
    this.$bus.$emit("footernav", true);
    this.$store.dispatch("setshow", true);
  },
};
</script>

<style lang="less" scoped>
#search {
  padding: 5px;
  .inp {
    font-size: 0.25rem;
    height: 30px;
    line-height: 30px;
    margin-left: 10px;
    input {
      width: 300px;
      color: #666;
      border: none;
      background-color: #f8f8f8;
      text-indent: 10px;
    }
    span {
      color: #333;
      font-weight: 700;
      font-size: 16px;
    }
  }
  .history {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    li {
      width: 40px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      background-color: #f7f7f7;
      margin-right: 10px;
      margin-top: 15px;
      color: #666;
    }
  }
}
.sousuo {
  color: #333;
  font-weight: 700;
  font-size: 16px;
}
p {
  color: #333;
  font-weight: 700;
  font-size: 16px;
  margin-top: 30px;
  margin-left: 15px;
  display: flex;
  justify-content: space-between;
  span {
    margin-right: 10px;
  }
}
.remen {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  color: #666;
  margin-top: 15px;
  padding: 10px 20px;
  padding-right: 100px;
}
li {
  height: 33px;
  line-height: 33px;
  background-color: #f7f7f7;
  margin-right: 10px;
  margin-top: 10px;
}
</style>